<template >
  <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
        style="height: 400px; overflow-y: hidden;"
        v-model="content"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
        mode="default"
      />
    </div>
</template>

<script lang='ts' setup>
import { ref,watch,reactive,onMounted,onBeforeUnmount,shallowRef } from "vue"
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { useStore } from "../store";
import { storeToRefs } from "pinia";
const editorRef = shallowRef()

const updataurl = import.meta.env.VITE_BASE_URL+'upload/add'
const baseUrl = import.meta.env.VITE_IMG_URL
const store=useStore();
const {token}=storeToRefs(store);
// 内容 HTML

const content = defineModel<string>('content')
const headers = {
  'Authorization': token.value
}
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' ,
MENU_CONF:{
    uploadImage:{
        server: updataurl,
        headers,
        fieldName: 'file',
        customInsert(res:any,insertFn:any){
            const url = updataurl
            insertFn(baseUrl+res.data)
        }
    }
}
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>

<style  scoped>
</style>
